<template>
  <div class="reset-step-view">
    <t-form ref="formRef" :rules="FORM_RULES_ONE" :data="formData" label-align="top" :required-mark="false">
      <t-form-item label="设备序列号" name="sn">
        <t-input v-model="formData.sn" placeholder="请输入用户名" :maxcharacter="24" @enter="next"> </t-input>
      </t-form-item>

      <t-form-item>
        <div class="btn-wrap">
          <t-button class="login-btn" theme="primary" @click="next">下一步</t-button>
          <div class="return-login" @click="emits('event', { type: 'login' })">
            <svg-icon class="icon" name="return"></svg-icon>
            <span class="text">返回登录</span>
          </div>
        </div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { FormInstanceFunctions } from 'tdesign-vue-next';
import { ref } from 'vue';

import { FORM_RULES_ONE, INIT_DATA_ONE } from '../datas/reset';

const emits = defineEmits(['event']);

const formData = ref({ ...INIT_DATA_ONE });
const formRef = ref<FormInstanceFunctions>();

const next = async () => {
  const validate = await formRef.value.validate();
  if (validate === true) emits('event', { type: 'next', data: formData.value });
};
</script>

<style lang="less" scoped>
.reset-step-view {
  padding-top: 60px;
}
</style>
